<script setup>
	import {reactive, ref } from 'vue'
	import {useRouter} from 'vue-router'
    import  {userLoginApi} from  '@/api/userApi.js'
	import userInfoStore from "@/store/userInfoStore.js"
	const  infoStore = userInfoStore()
	const router = useRouter()
	// 记住密码
	const checked = ref(false)
	const loginForm = reactive({
		username: '',
		password: ''
	})
	if(localStorage.getItem('username')){
		loginForm.username = JSON.parse(localStorage.getItem('username'))
        checked.value = true
	}
	const login = async () => {
		if (loginForm.username === '' || loginForm.password === '') {
			ElMessage.error('请输入账号或者密码');
			return
		}
		// const result = await userLoginApi(loginForm);
		// if (result == null) return
		if(checked.value){
			localStorage.setItem('username', JSON.stringify(loginForm.username))
		}
		// infoStore.setUserInfo(result.data)
		await router.push('/dashboard/worktop')  // 成功后跳转
		ElNotification({
			title: '登录成功',
			// message: `欢迎回来${.data.userInfo.nickname}`,
			type: 'success',
			duration: 2500,
			offset: 60
		})
	}
</script>
<template>
	<h2 class="f30  mb22">登录</h2>
	<el-form :model="loginForm" :size="'large'" class="login-form">
		<el-form-item>
			<el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
		</el-form-item>
		<el-form-item>
			<el-input v-model="loginForm.password" placeholder="请输入密码" show-password></el-input>
		</el-form-item>
		<div class="mb22 flex fJustifyBetween fAlignCenter">
			<el-checkbox v-model="checked" label="记住我"></el-checkbox>
			<el-link type="primary" @click="router.push('/forget')">忘记密码?</el-link>
		</div>
		<el-form-item>
			<el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
		</el-form-item>
		<div>
			<el-link style="float: right" type="primary" @click="router.push('/register')">去注册</el-link>
		</div>
	</el-form>
</template>

<style scoped lang="scss">
	* {
		user-select: none;
	}

	.el-form {
		width: 420px;
	}
</style>